<template>
	<el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}大船规范`" width="800px" v-model="visible" @confirm="confirm"
		@cancel="visible = false" @close="closeDialog">
		<div class="formData">
			<el-form :model="formData" ref="ruleForm" label-width="100px" :rules="rules">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="中文船名" prop="shipName">
							<el-input v-model="formData.shipName" placeholder="请填写中文船名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="英文船名" prop="shipNameEn">
							<el-input v-model="formData.shipNameEn" placeholder="请填写英文船名" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="船舶类型" prop="shipKindCode">
							<!-- <el-select v-model="formData.shipKindCode" placeholder="请选择船舶类型">
								<el-option v-for="item in selects.shipKindCode" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select> -->
							<Select placeholder="请选择船舶类型" :dataConfig="{ params: { type: 'DICT',dictType:'SHIP_KIND' } }" v-model:value="formData.shipKindCode" v-model:label="formData.shipKindName"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="国籍名称" prop="notionCode">
							<!-- <el-select v-model="formData.notionCode" placeholder="请选择船舶国籍名称">
								<el-option v-for="item in selects.notionCode" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select> -->
							<Select placeholder="请选择国籍名称" :dataConfig="{ params: { type: 'DICT',dictType:'SHIP_NATION' } }" v-model:value="formData.notionCode" v-model:label="formData.nationName"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="IMO" prop="imo">
							<el-input v-model="formData.imo" placeholder="请填写IMO" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="呼号" prop="callNo">
							<el-input v-model="formData.callNo" placeholder="请填写呼号" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="MMSI" prop="mmsi">
							<el-input v-model="formData.mmsi" placeholder="请填写MMSI" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="船上电话" prop="shipPhone">
							<el-input v-model="formData.shipPhone" placeholder="请填写船上电话" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="船长" prop="shipLength">
							<el-input v-model="formData.shipLength" placeholder="请填写船长" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="船宽" prop="shipWidth">
							<el-input v-model="formData.shipWidth" placeholder="请填写船宽" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="总吨" prop="totalTon">
							<el-input v-model="formData.totalTon" placeholder="请填写总吨" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="净吨" prop="netTon">
							<el-input v-model="formData.netTon" placeholder="请填写净吨" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="载重吨" prop="dwt">
							<el-input v-model="formData.dwt" placeholder="请填写载重吨" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="舱口数" prop="hatchNum">
							<el-input v-model="formData.hatchNum" placeholder="请填写舱口数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="航速" prop="speed">
							<el-input v-model="formData.speed" placeholder="请填写航速" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="confirm">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import api from '@/api/basicData/ship/index'
import Select from '@/components/Select/index.vue'
	const emit = defineEmits(['callback'])

	const selects = ref({
		shipKindCode: [{
				label: '类型1',
				value: 0
			},
			{
				label: '类型2',
				value: 1
			},
			{
				label: '类型3',
				value: 2
			}
		],
		tradeType: [
		  { label:"内贸",value:'N' },
		  { label:"外贸",value:'W' },
		]
	})

	const visible = ref(false)
	const mode = ref('add')
	const row = ref({})
	const formData = ref({
      shipName:'',
      shipNameEn:'',
      shipKindCode:'',
      shipKindName:'',
      notionCode:'',
      nationName:'',
      imo:'',
      callNo:'',
      mmsi:'',
      shipLength:'',
      shipWidth:'',
      totalTon:'',
      netTon:'',
      dwt:'',
      hatchNum:'',
      speed:'',
      shipPhone:'',
    })
	const ruleForm = ref({})
	const validateAmount = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		// 使用正则表达式校验小数点后是否只有两位  
		if (!/^-?\d+(\.\d{1,2})?$/.test(value)) {
			callback(new Error('请输入数字'));
		} else {
			// 注意：这里可能还需要进一步处理，确保末尾不是".00"之类的，但为简化示例，暂不处理  
			callback();
		}
	}
	const validatePhone = (rule, value, callback) => {
		if (!value) {
			return callback()
		}
		if (!/^1[3456789]\d{9}$/.test(value)) {
			callback(new Error('手机号格式不正确'));
		} else {
			callback();
		}
	}
	const rules = ref({
		/* shipPhone: proxy.getRules({handset:true}),
		shipName: proxy.getRules({required: true}),
		shipKindCode: proxy.getRules({required: true}),
		notionCode: proxy.getRules({required: true}),
		mmsi: proxy.getRules({required: true}),
		shipLength: proxy.getRules({required: true,numberCheck:{int: 9,dec: 2,}}),
		shipWidth: proxy.getRules({numberCheck:{int: 9,dec: 2,}}),
		hatchNum: proxy.getRules({numberCheck:{int: 9,dec: 0,}}),
		speed: proxy.getRules({numberCheck:{int: 9,dec: 0,}}),
		totalTon: proxy.getRules({required: true,numberCheck:{int: 9,dec: 0,}}),
		netTon: proxy.getRules({required: true,numberCheck:{int: 9,dec: 0,}}),
		dwt: proxy.getRules({required: true,numberCheck:{int: 9,dec: 0,}}), */
		shipPhone: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validatePhone,
				trigger: 'blur'
			}
		],
		shipName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		shipKindCode: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		notionCode: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		mmsi: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}],
		shipLength: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		shipWidth: [
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		hatchNum: [
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		speed: [
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		totalTon: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		netTon: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		dwt: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur'
			},
			{
				validator: validateAmount,
				trigger: 'blur'
			}
		],
		
	})
	// 展示
	const show = params => {
		console.log(params);
		visible.value = true
		mode.value = params?.mode || 'add'
		if (mode.value === 'edit') {
			row.value = params.row
			editInit()
		}
	}
	// 编辑
	const editInit = async () => {
		const {
			data
		} = await api.getDetailById({id:row.value.id})
		formData.value = {
			...data
		}
	}
	// 确认
	const confirm = () => {
		ruleForm.value.validate(valid => {
			if (valid) {
				let request
				if (mode.value === 'add') {
					request = api.save
					delete formData.value.id
				} else {
					request = api.save
				}
				request(formData.value).then(res => {
					if (res.code == '200') {
						ElMessage.success('保存成功')
						visible.value = false
						emit('callback')
					} else {
						ElMessage.error(res.msg)
					}
				})
			} else {
				ElMessage.warning('请完善表单信息！')
			}
		})
	}

	// 重置
	const closeDialog = () => {
		nextTick(() => {
			visible.value = false
			ruleForm.value.resetFields()
		})
	}
	defineExpose({
		show
	})
</script>